import React, { Component } from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.querySelector("#root"));

/**
 * React 中组件的两种创建方式：
 *    1. 类组件
 *      1. 需要继承 Component 或者 PureComponent
 *      2. 必须实现一个 render 函数，该函数需要返回一段 JSX
 *      3. 类名需要首字母大写（大驼峰语法）
 *    2. 函数组件，从 16.8.0 版本开始，更推荐使用 函数组件。
 *      1. 必须要有返回值，返回一段 JSX
 *      2. 函数名需要首字母大写（大驼峰语法）
 *
 * React 中使用组件的方式：
 *    直接将组件名当成自定义标签使用即可。
 *
 * React 中有一个 Fragment 内置组件，可以用于包裹，实现一个空元素。
 *    类似 Vue 中 template 元素
 *    1. <Fragment></Fragment>
 *    2. <></>
 *
 * JSX 语法，希望编辑器有更好的代码补全功能：
 *    一、将语言模式修改为 JavaScript JSX     TypeScript TSX
 *    二、文件名，直接修改为 jsx    tsx
 */
class App extends Component {
  // 必须实现一个 render 函数，该函数需要返回一段 JSX
  render() {
    return (
      <div>
        <h1>App</h1>
      </div>
    );
  }
}

function Hello() {
  // 必须返回一段 JSX
  return <h1>Hello</h1>;
}

root.render(
  <>
    <App />
    <Hello />
    <div>
      <img src="" alt="" />
    </div>
  </>
);
